<template>
    <div id='company'>
        <div v-for="(item, index) in companyItem" class='boxForm'>
            <div class="companyBox clearfix">
                <el-col :span="2">公司名称</el-col>
                <el-col :span="7">
                    <el-input id="companyName" v-model="item.companyName"></el-input>
                </el-col>
                <el-col :span="2">在职时间</el-col>
                <el-col :span="9">
                    <el-date-picker
                        v-model="item.inJobTime"
                        class='readTimeContent'
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>
            </div>
            <div class="companyBox clearfix">
                <el-col :span="2">最高职位</el-col>
                <el-col :span="7">
                    <el-input v-model="item.maxPosition"></el-input>
                </el-col>
                <el-col :span="2">级别</el-col>
                <el-col :span="4">
                    <el-select v-model="item.level" clearable placeholder="请选择">
                        <el-option
                            v-for="item in levelChoose"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="1">薪资</el-col>
                <el-col :span="4">
                    <el-input v-model="item.salary"></el-input>
                </el-col>
            </div>
            <div class="companyBox clearfix averageTime">
                <el-col :span="2">所在行业</el-col>
                <el-col :span="6">
                    <el-select v-model="item.trade" clearable placeholder="请选择">
                        <el-option
                            v-for="item in tradeChoose"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="1">规模</el-col>
                <el-col :span="6">
                    <el-select v-model="item.scale" clearable placeholder="请选择">
                        <el-option
                            v-for="item in tradeChoose"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                </el-col>
                <el-col :span="3">周平均工作时间</el-col>
                <el-col :span="3">
                    <el-select v-model="item.avaTime" clearable placeholder="请选择">
                        <el-option
                            v-for="item in avaTimeChoose"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </div>
            <div class="companyBox clearfix">
                <el-col :span="3" v-bind:style='{width: "100px"}'>主要工作内容</el-col>
                <el-col :span="17">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="item.textarea">
                    </el-input>
                </el-col>
            </div>
        </div>
         <div class="companyBox companyBtn">
	        <el-button type="primary" @click="handleCompanyOk()">确定</el-button>
	     </div>
       
    </div>
</template>

<script>
	import '../styles/add.css'
    const avaTimeOptions = [{
            value: '统招',
            label: '统招'
        }, {
            value: '非统招',
            label: '非统招'
        }];

    const scaleOptions = [{
            value: '专科',
            label: '专科'
        }, {
            value: '本科',
            label: '本科'
        }, {
            value: '硕士',
            label: '硕士'
        }, {
            value: '博士',
            label: '博士'
        }];
    const tradeOptions = [{
            value: '本科',
            label: '本科'
        }, {
            value: '硕士',
            label: '硕士'
        }, {
            value: '博士',
            label: '博士'
        }]
    const levelOptions = [{
            value: '本科',
            label: '本科'
        }, {
            value: '硕士',
            label: '硕士'
        }, {
            value: '博士',
            label: '博士'
        }]
    export default {
        data() {
            return {
                avaTimeChoose: avaTimeOptions,
                scaleChoose: scaleOptions,
                tradeChoose: tradeOptions,
                levelChoose: levelOptions,
                companyItem: [{
                    companyName: '',
                    inJobTime: '',
                    maxPosition: '',
                    level: '',
                    salary: '',
                    trade: '',
                    scale: '',
                    avaTime: '',
                    textarea: ''
                }]
            }
        },

        methods: {
            handleCompanyOk(){
                for(var i in this.companyItem){
                    var companyItem = this.companyItem[i];
                    if(companyItem.companyName == ''){
                        this.$message.warning('公司名称不能为空！');
                        return;
                    }
                    if(companyItem.inJobTime == ''){
                        this.$message.warning('在职时间不能为空！');
                        return;
                    }
                    if(companyItem.maxPosition == ''){
                        this.$message.warning('最高不能为空！');
                        return;
                    }
                    if(companyItem.level == ''){
                        this.$message.warning('级别不能为空！');
                        return;
                    }
                    if(companyItem.salary == ''){
                        this.$message.warning('薪资不能为空！');
                        return;
                    }
                    if(companyItem.trade == ''){
                        this.$message.warning('所在行业不能为空！');
                        return;
                    }
                    if(companyItem.scale == ''){
                        this.$message.warning('规模不能为空！');
                        return;
                    }
                    if(companyItem.avaTime == ''){
                        this.$message.warning('周平均时间不能为空！');
                        return;
                    }
                    if(companyItem.textarea == ''){
                        this.$message.warning('主要工作内容不能为空！');
                        return;
                    }
                }

            }
        }
    }
</script>
<style>
#company{
	padding:0 100px 0 250px;
}
</style>
